<!--
* @Description 前端生成 二维码 QRcodeIndex
* @author 三咲问道
* @date 2025/6/4
-->
<template>
  <div class="qr-code">前端根据链接生成二维码</div>
  <div class="qr-code">官方文档:
    <el-button type="primary" text="primary" @click="goto">https://www.npmjs.com/package/qrcode</el-button>
  </div>
  <div>
    <canvas class="canvas-content" ref="qrcode2" id="qrcode2"></canvas>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import QRccode from 'qrcode'
import {nextTick} from "vue";

const qrcode2 = ref(null)

const getQRCode = (el, text) => {
  if (!el) return
  QRccode.toCanvas(el, text)
}

const goto = () => {
  let url = `https://www.npmjs.com/package/qrcode`
  window.open(url)
}

nextTick(() => {
  const url = 'https://www.hao123.com/?tn=48021271_65_hao_pg'
  getQRCode(qrcode2.value, url)
})
</script>

<style scoped lang="less">
.qr-code {

}

.canvas-content {
  width: 200px !important;
  height: 200px !important;
}
</style>